
import React from 'react';
import { connect } from 'dva';
import { Form, Button, Table, Divider, Tag, Input } from 'antd';
import AddPage from './add';
import EditPage from './edit';
import DetailPage from './detail';
import moment from "moment";
import MoButton from "components/form/MoButton";


// 与model建立连接
@connect(({ sysFunctionModel }) => ({
  page: sysFunctionModel.page,
  pageSize: sysFunctionModel.pageSize,
  tabledata: sysFunctionModel.tabledata,
  addShowVisible: sysFunctionModel.addShowVisible,
  editShowVisible: sysFunctionModel.editShowVisible,
  detailShowVisible: sysFunctionModel.detailShowVisible
}))

//初始化Form
@Form.create()
class List extends React.PureComponent {

  componentDidMount() {
    //初始化页面数据
    const { dispatch } = this.props;
    dispatch({
      type: 'sysFunctionModel/initPageData',
      payload: {},
    });
  }

  addShow = () => {
    console.log("新增");
    const { dispatch } = this.props;
    dispatch({
      type: 'sysFunctionModel/addShow',
      payload: {}
    });
  }

  editShow = (value, loadBack) => {
    console.log("编辑");
    const { dispatch } = this.props;
    dispatch({
      type: 'sysFunctionModel/editShow',
      payload: { function_id: value }
    });
  }

  delRowData = (value, loadBack) => {
    console.log("删除");
    const { dispatch } = this.props;
    dispatch({
      type: 'sysFunctionModel/delRowData',
      payload: { function_id: value }
    });
  }

  querySubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { dispatch } = this.props;
        dispatch({
          type: 'sysFunctionModel/querySubmit',
          payload: { queryParams: values }
        });
      }
    });
  };

  /**
   * 页数据长度发生改变
   */
  pageSizeChange = (current, pageSize) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysFunctionModel/pageOrPageSizeChange',
      payload: { page: 1, pageSize }
    });
  };

  /**
   * 页码发生改变
   */
  pageChange = (page, pageSize) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'sysFunctionModel/pageOrPageSizeChange',
      payload: { page, pageSize }
    });
  };

  render() {
    const { addShow, editShow, delRowData, querySubmit, pageSizeChange, pageChange } = this;
    const { tabledata, page, pageSize } = this.props;
    const { getFieldDecorator } = this.props.form;
    //定义数据显示项
    const columns = [{
      title: '名称',
      dataIndex: 'function_name',
      key: 'function_name',
      align: "center"
    }, {
      title: '编码',
      dataIndex: 'function_key',
      key: 'function_key',
      align: "center"
    }, {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      align: "center"
    }, {
      title: '操作',
      key: 'table_id',
      render: (value, rowData, index) => (
        <span>
          <MoButton ghost="true" type="primary" size="small" moAuto={3} moClick={(loadBack) => editShow(rowData.function_id, loadBack)}>编辑</MoButton>
          <Divider type="vertical" />
          <MoButton ghost="true" type="danger" size="small" moAuto={3} moClick={(loadBack) => delRowData(rowData.function_id, loadBack)}>删除</MoButton>
        </span>
      ),
    }]
    return (

      <div>
        <div className="flex">
          <Form layout="inline">


            <Form.Item label="搜索">
              {getFieldDecorator('search', {
                valuePropName: 'value',
                initialValue: '',
                rules: [{ message: '功能名称，编码' }],
              })(<Input placeholder="功能名称，编码" allowClear ></Input>)}
            </Form.Item>

            <Form.Item>
              <Button type="primary" icon="search" size="small" onClick={querySubmit}>查 询</Button>
              <Button type="primary" icon="plus" size="small" className="mgl10" onClick={addShow} >新增</Button>
            </Form.Item>
          </Form>

        </div>
        <div style={{ marginTop: "15px" }}>
          <Table rowKey="function_id" columns={columns} dataSource={tabledata.datalist} pagination={{
            "size": "small",
            "current": page,
            "pageSize": pageSize,
            "total": tabledata.totalSize,
            "showSizeChanger": true,
            "showQuickJumper": true,
            "onChange": pageChange,
            "onShowSizeChange": pageSizeChange
          }} />
        </div>
        <div>
          <AddPage></AddPage>
          <EditPage></EditPage>
          <DetailPage></DetailPage>
        </div>
      </div>

    );
  }
}

export default List;
